<template>
	<view class="shop" v-if="shop.price">
		<view class="shopBanner">
			<view class="tab-one-banner">
				<uni-swiper-dot :info="banner" :current="current" field="content" :mode="mode">
					<swiper class="swiper-box" @change="change" circular :interval="7000" autoplay="true"
						:duration="500">
						<swiper-item v-for="(item ,index) in banner" :key="index">
							<view class="swiper-item">
								<image :src="item" mode="aspectFit"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<!-- <image :src="shop.img" mode="aspectFill"></image> -->
			</view>
		</view>
		<view class="shopTop">
			<view class="shopTitle">
				{{shop.name}}
			</view>
			<view class="shopPrice">
				<view class="shopPriceLeft">
					{{shop.price}}<text>元/{{shop.day}}天</text>
				</view>
				<view class="shopPriceRight">
					可买断 <text>|</text> 库存：{{shop.sort}}
				</view>
			</view>
			<view class="shopQixian">
				<view>
					<view>{{shop.day}}天</view>
					<text>单期期限</text>
				</view>
				<view>
					<view>{{shop.small_day}}期</view>
					<text>最少期数</text>
				</view>
				<view>
					<view>{{(shop.price*shop.small_day).toFixed(2)}}元</view>
					<text>最低租金</text>
				</view>
			</view>
			<view class="shopZmf" v-if="shop.ya_type == 1">
				<view>
					<!-- <image src="https://www.kmdj2018.com/Uploads/zfb/wx.png" mode="aspectFit"></image> -->
					<text>押金￥{{shop.deposit}}元,微信支付分{{shop.dit}}分以上可享受免押金</text>
				</view>
				<view @click="getNavz">
					立即查看
				</view>
			</view>
		</view>
		<view class="shopJia" @click="getnav('/pages/storeDetails/storeDetails',shop.shop.id)">
			<view class="shopJiaLeft">
				<view>
					<image src="https://www.kmdj2018.com/Uploads/zfb/shop01.png" mode="aspectFit"></image>
					<text>{{shop.shop.name}}</text>
				</view>
				<view>
					<image src="https://www.kmdj2018.com/Uploads/zfb/shop02.png" mode="aspectFit"></image>
					<text>{{shop.shop.pro_name}}{{shop.shop.city_name}}{{shop.shop.area_name}}{{shop.shop.add_ress}}</text>
				</view>
				<view>
					<image src="https://www.kmdj2018.com/Uploads/zfb/shop03.png" mode="aspectFit"></image>
					<text>{{shop.shop.phone}}</text>
				</view>
			</view>
			<view class="shopJiaRight">
				<image src="https://www.kmdj2018.com/Uploads/zfb/right.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="shopXiang" v-if="centent">
			<view class="shopXiangTitle">
				商品详情
			</view>
			<view class="shopXiangCen">
				<u-parse :content="centent" @preview="preview" @navigate="navigate" />
			</view>
		</view>
		<view class="shopFixed">
			<button @click="$refs.popupgg.open();statusTwo = 1" v-if="shop.dai_type == 1">以租代购</button>
			<button @click="$refs.popupgg.open();statusTwo = 2" v-else>立即购买</button>
			<button @click="statusTwo = 3;$refs.popup.open()">立即租用</button>
		</view>
		<uni-popup ref="popupgg" type="bottom" title="选择规格" background-color="#fff">
			<view class="guige">
				<view class="guige_title">
					选择规格
				</view>
				<view class="guigeTop">
					<view class="guigeTopLeft">
						<image :src="shop.img" mode="aspectFill"></image>
					</view>
					<view class="guigeTopRight">
						<view v-if="statusTwo == 1">
							<text>{{shop.dan_price}}</text>元/1天
						</view>
						<view v-if="statusTwo == 2">
							<text>{{shop.zong_price?parseFloat(shop.zong_price).toFixed(2):0}}</text>元
						</view>
						<view>
							请选择套餐：
						</view>
					</view>
				</view>
				<view class="guigePrice" v-if="statusTwo == 1">
					<view class="guigePriceleft">
						<view>{{(parseFloat(shop.dan_price)*30).toFixed(2)}}元</view>
						<view>月租金</view>
					</view>
					<view class="guigePriceright">
						<view>{{(parseFloat(shop.dan_price)*parseFloat(shop.zuday)).toFixed(2)}}元</view>
						<view>总租金</view>
					</view>
				</view>
				<view class="guigeGuige">
					<view class="guigeGuigeTitle">
						套餐
					</view>
					<view class="guigeGuigeFor textwidth">
						<text :class="statusTwo == 1?'back':''" @click="statusTwo = 1" v-if="shop.dai_type == 1">以租代购</text>
						<text :class="statusTwo == 2?'back':''" @click="statusTwo = 2">立即购买</text>
					</view>
					<view class="guigeGuigeTitle titlemargin" v-if="statusTwo == 1">
						租期
					</view>
					<view class="guigeGuigeFor" v-if="statusTwo == 1">
						<text class="back">{{shop.zuday || 0}}天</text>
					</view>
				</view>
				<view class="guigeFlex">
					<view class="guigeFlexLeft">
						数量
						<text>库存：{{shop.sort}}</text>
					</view>
					<view class="guigeFlexRight">
						<lxc-count @handleCount="handleCountClickNumtwo" :min="1" :value="numtwo"
							:max="parseFloat(shop.sort)" :text="2">
						</lxc-count>
					</view>
				</view>
				<view class="guigeBut">
					<button @click="getSubTwo">确定</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="bottom" background-color="#fff" :safe-area="false">
			<view class="guige">
				<view class="guige_title">
					选择规格
				</view>
				<view class="guigeTop">
					<view class="guigeTopLeft">
						<image :src="shop.img" mode="aspectFill"></image>
					</view>
					<view class="guigeTopRight">
						<view>
							<text>{{shop.price*value*num}}</text>元/{{shop.day*value}}天
						</view>
						<view>
							请选择租期：
						</view>
					</view>
				</view>
				<view class="guigeGuige">
					<view class="guigeGuigeTitle">
						租期
					</view>
					<view class="guigeGuigeFor">
						<text :class="classId == item.id?'back':''" @click="getClass(item)"
							v-for="(item,index) in shopDay"
							:key="index">{{Number(item.day)+Number(shop.day*item.id)}}天</text>
						<text style="margin-right: 0;" @click="$refs.popnum.show(),popupVisible = false">自定义</text>
					</view>
				</view>
				<view class="guigeFlex">
					<view class="guigeFlexLeft">
						数量
						<text>库存：{{shop.sort}}</text>
					</view>
					<view class="guigeFlexRight">
						<lxc-count @handleCount="handleCountClickNum" :min="1" :value="num" :max="parseFloat(shop.sort)"
							:text="2">
						</lxc-count>
					</view>
				</view>
				<view class="guigeBut">
					<button @click="getSub">确定</button>
				</view>
			</view>
		</uni-popup>
		<pop ref="popnum" direction="center" :is_close="true" :is_mask="true" :width="660" height="fit-content"
			:maskFun="true" style="background-color: #fff;">
			<view class="tuikuan">
				<view class="tuikuantop">
					选择租期
				</view>
				<view class="tuikuantext">
					单期期限：{{shop.day}}天 <text>|</text> 最少期限：{{shop.small_day}}期
				</view>
				<view class="tuikuannum">
					<view class="" style="height: 30rpx;">

					</view>
					<lxc-count @handleCount="handleCountClick" :min="Number(shop.small_day)" :value="value"
						:delayed="100">
					</lxc-count>
					<view class="" style="height: 30rpx;">

					</view>
				</view>
				<view class="tuikuanbutton">
					<button @click="getSub">确定</button>
				</view>
			</view>
		</pop>
	</view>
</template>

<script>
	// import popupBottom from '@/components/px-popup-bottom/px-popup-bottom.vue';
	import lxcCount from '@/components/lxc-count/lxc-count.vue'
	import pop from "@/components/ming-pop/ming-pop.vue";
	import parse from 'mini-html-parser2';
	import uParse from '@/components/gaoyia-parse/parse.vue' 
	export default {
		data() {
			return {
				show: false,
				popupVisible: false,
				popupVisibletwo: false,
				value: 0,
				current: 0,
				num: 1,
				numtwo: 1,
				statusTwo: 1,
				classId: 0,
				centent: '',
				content: [],
				shop: {
					shop: {
						name: ''
					}
				},
				banner: [],
				shopDay: [],
				mode: 'nav',
				iSimg: false
			};
		},
		components: {
			// popupBottom,
			uParse,
			pop
		},
		onLoad(e) {
			this.init(e.data)
		},
		methods: {
			getValue() {
				this.value = 1
			},
			getNavz() {
				// 跳转芝麻信用分页面
				// #ifdef H5
				console.log('h5')
				location.href = 'alipays://platformapi/startapp?appId=20000118'
				//#endif
				// #ifdef MP-ALIPAY
				console.log('支付宝')
				my.call('startApp', {
					scheme: 'alipays://platformapi/startapp?appId=20000118'
				})
				//#endif
				// #ifdef MP-WEIXIN
				console.log('微信小程序')
				wx.navigateToMiniProgram({
					appId: 'wxd8f3793ea3b935b8', //
					path: 'pages/record/detail',
					extraData: {
						mch_id: '1230000109',
						service_id: '88888888000011',
						out_order_no: '1234323JKHDFE1243252',
						timestamp: '1530097563',
						nonce_str: 'zyx53Nkey8o4bHpxTQvd8m7e92nG5mG2',
						sign_type: 'HMAC-SHA256',
						sign: '029B52F67573D7E3BE74904BF9AEA'
					},
					success(e) {
						//dosomething
						console.log(11111111111)
						console.log(e)
					},
					fail() {
						//dosomething
					},
					complete() {
						//dosomething
				 }
				});
				//#endif
			},
			getSubTwo() {
				if (!uni.getStorageSync('zfbtoken')) {
					this.getnav('/pages/index/index')
					return
				}
				if (parseFloat(this.shop.sort) <= 0) {
					this.gettoast("库存不足")
					return
				}
				if (this.statusTwo == 1) {
					// 以租代购
					// console.log(this.shop)
					let data = {}
					data = this.shop
					data.num = this.numtwo
					data.value = this.value
					data.statusTwo = this.statusTwo
					this.getnav('/pages/confirmOrderO/confirmOrderO', JSON.stringify(data))
					this.$refs.popnum.close()
					this.popupVisibletwo = false
				} else {
					// 立即购买
					// console.log(this.shop)
					let data = {}
					data = this.shop
					data.num = this.numtwo
					data.value = this.value
					data.statusTwo = this.statusTwo
					this.getnav('/pages/confirmOrderO/confirmOrderO', JSON.stringify(data))
					this.$refs.popnum.close()
					this.popupVisibletwo = false
				}
			},
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			},
			change(e) {
				this.current = e.detail.current;
			},
			handleCountClick(val) {
				console.log("自定义期数", val)
				this.value = val
				let arr = []
				arr = this.shopDay.filter(item => {
					return Number(item.day) + Number(this.shop.day * item.id) == this.value * this.shop.day
				})
				// console.log(arr.length)
				if (arr.length > 0) {
					this.classId = arr[0].id
				} else {
					this.classId = 99999
				}
			},
			handleCountClickNum(val) {

				this.num = val
			},
			handleCountClickNumtwo(val) {

				this.numtwo = val
			},
			getClass(data) {
				this.classId = data.id
				this.value = (Number(data.day) + Number(this.shop.day * data.id)) / this.shop.day
				console.log(this.value);
			},
			init(id) {
				this.$request("Goods/FindGoods", {
					data: {
						id: id
					},
					isLoad: false
				}).then(res => {
					this.shop = res.result
					this.shop.zuday = res.result.zuday ? res.result.zuday : 0
					if (res.result.photo) {
						this.banner = res.result.photo.split(",")
					} else {
						this.banner = res.result.img.split(",")
					}
					// this.classId = res.result.goods_gui[0].id
					for (let i = 0; i < 4; i++) {
						this.shopDay.push({
							day: this.shop.day * this.shop.small_day,
							id: i
						})
					}
					this.value = Number(this.shop.small_day)
					let richtext = res.result.content
					let fileServerIp = 'https://www.kmdj2018.com'
					this.centent = richtext.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, p1) {
						return `<img src='${p1.includes(fileServerIp)? p1 : 'https://images.weserv.nl/?url=' + p1}' />`
					})
					// this.iSimg = this.shop.content.search(/<img /i) >= 0
				})
			},
			getimg(e) {
				console.log(87979)
				console.log(e)
			},
			getSub() {
				if (!uni.getStorageSync('zfbtoken')) {
					this.getnav('/pages/index/index')
					return
				}
				if (parseFloat(this.shop.sort) <= 0) {
					this.gettoast("库存不足")
					return
				}
				/* if(!uni.getStorageSync('azktoken')){
					this.getnav('/pages/index/index')
					return
				} */
				let data = {}
				data = this.shop
				data.num = this.num
				data.value = this.value
				data.statusTwo = this.statusTwo
				this.getnav('/pages/confirmOrderO/confirmOrderO', JSON.stringify(data))
				this.$refs.popnum.close()
				this.popupVisible = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shopXiangCen {
		padding: 0 32rpx;
	}

	.swiper-box {
		height: 440rpx;
	}

	.shopBanner {
		height: 440rpx;

		.tab-one-banner {
			width: 100%;
			height: 440rpx;

			image {
				width: 750rpx;
				height: 440rpx;
			}
		}
	}

	.shopTop {
		padding: 0 32rpx 32rpx 32rpx;
		background-color: #fff;

		.shopTitle {
			padding-top: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.shopPrice {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.shopPriceLeft {
				font-size: 44rpx;
				color: #F23D0E;
				font-weight: bold;

				>text {
					font-size: 28rpx;
					color: #666666;
					font-weight: 500;
				}
			}

			.shopPriceRight {
				font-size: 28rpx;
				color: #666666;

				text {
					margin: 0 20rpx;
				}
			}
		}

		.shopQixian {
			margin-top: 32rpx;
			background-color: #F5F6FA;
			border-radius: 20rpx;
			display: flex;
			text-align: center;

			>view {
				position: relative;
				flex: 1;
				padding: 24rpx 0;

				>view {
					font-size: 32rpx;
					font-weight: bold;
					color: #323233;
				}

				>text {
					margin-top: 20rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}

			>view::after {
				content: '';
				width: 1rpx;
				height: 72rpx;
				background-color: #E6E7EB;
				position: absolute;
				right: 0;
				top: 30rpx;
			}

			>view:last-child::after {
				display: none;
			}
		}

		.shopZmf {
			margin-top: 20rpx;
			border: 1rpx solid #F7BC1C;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 16rpx;
			border-radius: 20rpx;
			background: linear-gradient(to right, #FFF6DC, #FFEAAF);

			>view:first-child {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				>text {
					font-size: 24rpx;
					color: #333;
				}
			}

			>view:last-child {
				color: #1078FF;
				font-size: 24rpx;
			}
		}
	}

	.shopJia {
		margin: 20rpx 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;

		.shopJiaLeft {
			>view {
				display: flex;
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 16rpx;
				}

				text {
					font-size: 28rpx;
					color: #323233;
				}
			}

			>view:first-child {
				margin-bottom: 20rpx;

				text {
					font-weight: bold;
				}
			}

			>view:last-child {
				margin-top: 20rpx;
			}
		}

		.shopJiaRight {
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.shopXiang {
		background-color: #fff;
		margin-bottom: 130rpx;
		min-height: 600rpx;

		.shopXiangTitle {
			position: relative;
			text-align: center;
			padding: 40rpx;
			font-size: 28rpx;
			color: #323233;
			font-weight: bold;
		}

		.shopXiangTitle::after {
			content: "";
			width: 108rpx;
			height: 1rpx;
			background-color: #707070;
			top: 56rpx;
			left: 178rpx;
			position: absolute;
		}

		.shopXiangTitle::before {
			content: "";
			width: 108rpx;
			height: 1rpx;
			background-color: #707070;
			top: 56rpx;
			right: 178rpx;
			position: absolute;
		}
	}

	.shopFixed {
		width: 100%;
		height: 114rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;

		button {
			margin: 16rpx;
			width: 50%;
			height: 80rpx;
			border-radius: 100rpx;
			font-size: 32rpx;
			color: #323233;
			font-weight: bold;
			line-height: 80rpx;
		}

		button:first-child {
			border: 1rpx solid #000;
		}

		button:last-child {
			background-color: #F7BC1C;
		}
	}

	//  规格样式
	.guige {
		// border: 1rpx solid red;
		background-color: #fff;
		padding: 20rpx;
		
	}
	.guige_title{
		text-align: center;
		padding: 20rpx 0 40rpx 0;
	}
	.guigePrice {
		display: flex;
		margin-top: 55rpx;

		>view {
			flex: 1;
			text-align: center;

			>view:first-child {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}

			>view:last-child {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}

	.guigeTop {
		display: flex;
		align-items: center;

		.guigeTopLeft {
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
			}
		}

		.guigeTopRight {
			margin-left: 32rpx;

			>view:first-child {
				color: #666666;
				font-size: 28rpx;

				>text {
					font-size: 44rpx;
					color: #F23D0E;
					font-weight: bold;
				}
			}

			>view:last-child {
				color: #666666;
				margin-top: 20rpx;
				font-size: 28rpx;
			}
		}
	}

	.guigeGuige {
		margin-top: 60rpx;

		.guigeGuigeTitle {
			color: #999;
			font-size: 28rpx;
		}

		.titlemargin {
			margin-top: 40rpx;
		}

		.guigeGuigeFor {
			text {
				margin-top: 30rpx;
				background-color: #F0F1F5;
				color: #333333;
				font-size: 28rpx;
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				display: inline-block;
				border-radius: 8rpx;
				margin-right: 20rpx;
				font-weight: bold;
			}

			.back {
				background-color: #F7BC1C !important;
			}
		}

		.textwidth {
			text {
				width: 172rpx;
			}
		}
	}

	.guigeFlex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 72rpx;

		.guigeFlexLeft {
			font-size: 28rpx;
			color: #999999;

			>text {
				margin-left: 24rpx;
				color: #333333;
				font-size: 28rpx;
			}
		}
	}

	.guigeBut {
		margin-top: 50rpx;

		button {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #F7BC1C;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 12rpx;
		}
	}

	.tuikuan {
		background-color: #fff;
		.tuikuantop {
			text-align: center;
			font-size: 32rpx;
			color: #323233;
			font-weight: bold;
		}


		.tuikuantext {
			text-align: center;
			font-size: 28rpx;
			color: #323233;
			margin: 40rpx 0 6rpx 0;

			>text {
				padding: 0 26rpx;
				color: #707070;
			}
		}

		.tuikuannum {
			width: 160rpx;
			// border: 1rpx solid red;
			text-align: center;
			margin: 0 auto;
		}

		.tuikuanbutton {
			button {
				margin: 0 auto;
				background-color: #F7BC1C;
				line-height: 80rpx;
				height: 80rpx;
				width: 326rpx;
				border-radius: 100rpx;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}
		}
	}
</style>
